<template>
    <div class="app-container">
        <template>
            <el-form ref="form" :model="form" :rules="rules" label-width="125px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="消费者用户名:" prop="username">
                            <el-input v-model="form.username" placeholder="消费者的唯一用户名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="消费者Id:">
                            
                            <span slot="label">
                                <el-tooltip content="用于存储消费者现有唯一ID的字段用于将Kong与现有数据库中的用户映射" placement="right-end">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                消费者Id:
                            </span>
                            <el-input v-model="form.custom_id" placeholder="消费者的唯一用户名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                <el-col :span="24">
                    <el-form-item label="标签:" prop="tags">
                        <el-tag :key="tag" v-for="tag in form.tags" closable 
                        :disable-transitions="false" 
                        @close="handleTagClose(tag)">
                            {{tag}}
                        </el-tag>
                        
                        <span slot="label">
                            <el-tooltip content="与上游相关联的一组可选字符串，用于分组和过滤" placement="right-end">
                            <i class="el-icon-question"></i>
                            </el-tooltip>
                            标签:
                        </span>

                        <el-input v-model="inputTag" placeholder="与上游相关联的一组可选字符串，用于分组和过滤。按enter键 确认"
                        @keyup.enter.native="handleInputTagConfirm"
                        @blur="handleInputTagConfirm"
                        ></el-input>
                    </el-form-item>                    
                </el-col>
            </el-row>
            </el-form>
            

            <el-row type="flex" justify="end">
                <el-col :span="12">
                    <el-button type="primary" @click="submitForm">{{operateBtnName}}</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </el-col>
            </el-row>   
            
        </template>
    </div>
</template>
<script>
import {addConsumer} from '@/api/kong/consumer.js'
export default {
    props:{
        operate:{
            type: String,
            required: false,
            default: "add",
        },
        consumer:{
            type:Object,
            required: false,
            default: null,
        }
    },
    data () {
        return {
            form:{
                username:null,
                custom_id: null,
                tags: [],
            },
            rules:{
                username:[
                    { required: true, message: '消费者用户名', trigger: 'blur' },     
                ]
            },  
            inputTag:null, 
            operateBtnName:"确 认",         
        }
    },
    created(){
        if(this.consumer){
            this.form=this.consumer || this.form
        }
        if(this.operate=='add'){
            this.operateBtnName="确 认"
        }
        if(this.operate=='edit'){
            this.operateBtnName="修 改"
        }
    },
    methods:{     
        submitForm(){
            this.$refs['form'].validate(valid => {
                if (!valid) return;
                console.log(JSON.stringify(this.form));
                if(this.operate=="add"){
                    // TODO 提交表单
                    addConsumer(this.form).then( res =>{
                        // console.log(JSON.stringify(res))
                        // 重置表单
                        this.reset();
                        // 关闭窗口
                        this.$emit('callback',"新增成功");
                    })
                }
            })

        },
        cancel(){},
        
        // 表单重置
        reset() {
            this.form = {
                username:null,
                custom_id: null,
                tags: [],
            };
            this.resetForm("form");
        },
        // 标签关闭事件
        handleTagClose(tag){
            this.form.tags.splice(this.form.tags.indexOf(tag),1);
        },

        // 标签输入确认事件
        handleInputTagConfirm(){
            let inputValue=this.inputTag;
            if(inputValue){
                if(this.form.tags.indexOf(inputValue)>-1){
                    this.inputTag="";
                    return;
                }
                this.form.tags.push(inputValue);
            }
            this.inputTag="";
        },
    }
}
</script>
<style scoped>

</style>